<template>
	<view class="groupon">
		<view class="title">
			<view style="font-size: 35rpx;">爆款推荐</view>
			<view>省时省心限时拼</view>
		</view>
		<view  v-if="isEmpty"  style="margin: 0 80rpx;background-color: #fff;height: 1000rpx;border-radius: 20rpx;">
			<empty :emptyImg="emptyImg" :emptyTxt="emptyTxt"></empty>
		</view>
		
		<view v-if="!isEmpty" class="goodsList">
			<view class="goodsItem" v-for="(item, index) in grouponList" @click="jumpPage(item.sharing_id)">
				<view class="goodsImg">
					<u-tag :text="item.text" bg-color="#ff6361" class="typeTag" shape="circleRight" 
						mode="dark" />
					<image :src="item.first_image"></image>
				</view>
				<view class="goodsInfo">
					<view class="goodsTitle u-line-2">{{item.goods_name}}</view>
					<view class="numTag">
						<u-icon color="#fa3534" name="tags-fill"></u-icon>
						<view class="numTagTxt">已拼{{item.sale}}件</view>
					</view>
					<view class="cardFooter">
						<view class="price_txt">
							<view class="price"> 
								¥{{item.price}}
							</view>
							<view class="u_price">
								¥{{item.line_price}}
							</view>
						</view>
						
					</view>
					<u-button @click="jumpPage(item.sharing_id)" :custom-style="customStyle" shape="circle">马上拼</u-button>
					
				</view>
			</view>
			<u-loadmore :status="status" color="#909399" :margin-top="20" :margin-bottom="20" v-if="!isEmpty"/>
		</view>
		<login-model ref="loginModel"></login-model>
		<hoverMenu></hoverMenu>
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import empty from "@/components/public/empty.vue";
	import loginModel from "@/components/public/loginModel.vue";
	import {sharingList} from "@/common/api.js";
	export default {
		components: {
			empty,
			loginModel,
			hoverMenu
		},
		data() {
			return {
				customStyle:{
					background: "linear-gradient(90deg,#fe832a,#f60)",
					color:"#fff",
					border:0,
					fontSize:"25rpx",
					height:"50rpx",
					marginTop:"10rpx",
					width:"300rpx"
				},
				isEmpty:false,
				emptyImg:getApp().globalData.imageUrl+"empty_goods.png",
				emptyTxt:"暂无可拼商品，去首页看看吧～",
				grouponList:[],
				status: 'loadmore',
				pageSize: 10,
				pageStart: 1,
				total:0,
			}
		},
		onLoad: function(options) {
			this.grouponList=[];
			this.pageStart = 1;
			this.selectGrouponList();
		},
		onReachBottom: function() {
			if(this.total/(this.pageStart*this.pageSize)>1){
				this.pageStart++;
				this.selectGrouponList();
			}else{
				this.status = 'nomore';
			}
		},
		methods: {
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			selectGrouponList(){
				sharingList(this,{page:this.pageStart,limit:this.pageSize});
			},
			jumpPage(sharing_id){
				uni.navigateTo({
				  url: '/sharing/goodsDetail?sharing_id='+sharing_id
				});
			}
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		background: #f6f6f6;
	}
	.groupon{
		width: 100%;
		height: 187px;
		background: url("https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/group_list_bg.png") no-repeat;
		background-size: 100% 187px;
	}
	.title{
		padding: 15rpx 40rpx;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		color: #fff;
		font-weight: 800;
		align-items: flex-end;
		margin-bottom: 50rpx;
	}
	.goodsList{
		margin: 0 80rpx;
	}
	.goodsItem{
		background-color: #fff;
		padding: 20rpx 10rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.goodsImg image{
		width: 200rpx;
		height: 200rpx;
	}
	.typeTag{
		position: absolute;
		z-index: 1;
	}
	.goodsInfo{
		margin-left: 20rpx;
	}
	.goodsTitle{
		margin-bottom: 10rpx;
	}
	.numTag{
		width: 180rpx;
		height: 50rpx;
		background: rgba(255,224,226,.3);
		border-radius: 25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 15rpx;
	}
	.numTagTxt{
		color: #f7979c;
		font-size: 20rpx;
	}
	
	.price_txt{
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}
	.price {
		font-size: 30rpx;
		color: #FA3534;
		margin-top: 5px;
	}
	.u_price {
		font-size: 25rpx;
		color: #909399;
		margin-left: 10rpx;
		text-decoration: line-through;
	}
	.cardFooter{
		margin-top: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}
</style>
